<template>
  <div id="follow-page">
    <a-card class="card">
      <title-component title-text="用户关注"></title-component>
      <a-tabs v-model:active-key="activeKey" @change="handleTabChange">
        <a-tab-pane key="1" title="关注">
          <!-- 卡片容器 -->
          <div v-if="follows.length" class="card-container">
            <UserCard
              v-for="follow in follows"
              :key="follow.id"
              :id="follow.id"
              :nickname="follow.nickname"
              :avatar="follow.avatar"
              :user-desc="follow.userDesc"
              :fans-num="follow.fans"
              :follow-num="follow.followee"
            />
          </div>
          <a-empty v-else-if="!isLoading && !follows.length"/>
          <!-- 加载中提示 -->
          <div v-show="isLoading" class="loading">
            <p>正在加载中...</p>
          </div>
          <!-- 最后一页提示 -->
          <div v-if="isLastPage && follows.length" class="no-more">没有更多了</div>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import TitleComponent from "@/components/TitleComponent.vue";
import UserCard from '@/components/UserCard.vue';
import { Message } from "@arco-design/web-vue";
import { pageQueryFollowById } from "@/api/user.js";
import router from "@/router/index.js";

const activeKey = ref('1')
const follows = ref([])
const currentPage = ref(1)
const isLoading = ref(false)
const isLastPage = ref(false)
const userId = ref(null)

const getUserId = () => {
  const params = router.currentRoute.value.params
  userId.value = params.id
  loadData()
}

const loadData = async () => {
  if (isLoading.value || isLastPage.value) return
  isLoading.value = true
  try {
    const data = {
      id: userId.value,
      currentPage: currentPage.value
    }
    const res = await pageQueryFollowById(data)
    if (res.data.code === 1) {
      const newFollows = res.data.data
      if (newFollows.length === 0) {
        isLastPage.value = true
      } else {
        if (currentPage.value === 1) {
          follows.value = newFollows
        } else {
          follows.value = follows.value.concat(newFollows)
        }
        currentPage.value++
      }
    } else {
      Message.error('加载关注列表失败')
    }
  } catch (error) {
    console.log(error)
    Message.error('加载关注列表失败')
  } finally {
    isLoading.value = false
  }
}

const handleScroll = () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement
  if (scrollTop + clientHeight >= scrollHeight - 600) {
    loadData()
  }
}

const handleTabChange = (key) => {
  activeKey.value = key
  // 重置状态
  currentPage.value = 1
  follows.value = []
  isLastPage.value = false
  loadData()
}

watch(activeKey, () => {
  // 重置状态
  currentPage.value = 1
  follows.value = []
  isLastPage.value = false
  loadData()
})

onMounted(() => {
  getUserId()
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.card {
  margin-top: 20px;
}

.card-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 20px;
  padding: 5px 0;
}

.loading {
  text-align: center;
  margin-top: 20px;
}

.no-more {
  text-align: center;
  margin-top: 20px;
  color: #999;
}

@media (max-width: 768px) {
  .card-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 5px 0;
  }
}
</style>
